<template>
  <div class="bg-c-fff mb70 container min-height">
    <h2 class="box-title rel"><a href="#/index/help-center">内容管理-帮助中心</a> > 新增帮助</h2>
    <h3>您正在为角色：<b>{{roleName}}</b>分配权限，请选择以下功能模块进行权限分配</h3>
    <div class="main">
      <div v-for='(item,index) in menuList' class="main-ulcon">
        <h4 class="fix">{{item.name}}
          <ul class="parent-box dib flo-right">
            <li class="dib">
              <input type="radio" @change="onChange(item.id,0)" :name="'p'+index" :id="'p-no-'+index" :checked="item.permission===0">
              <label :for="'p-no-'+index">无</label>
            </li>
            <li class="dib">
              <input type="radio" @change="onChange(item.id,1)" :name="'p'+index" :id="'p-read-'+index" :checked="item.permission===1">
              <label :for="'p-read-'+index">读</label>
            </li>
            <li class="dib">
              <input type="radio" @change="onChange(item.id,2)" :name="'p'+index" :id="'p-write-'+index" :checked="item.permission===2">
              <label :for="'p-write-'+index">读写</label>
            </li>
          </ul>
          </h4>
        <div class="children-box" v-for='(childrenItem,subIndex) in item.children' v-if="item.children">
          <div class="fix">{{childrenItem.name}}
            <ul class="dib flo-right">
              <li class="dib">
                <input type="radio" @change="onChange(childrenItem.id,0)" :name="'p'+index+'c'+subIndex" :id="'p'+index+'c-no+'+subIndex" :checked="childrenItem.permission===0">
                <label :for="'p'+index+'c-no+'+subIndex">无</label>
              </li>
              <li class="dib">
                <input type="radio" @change="onChange(childrenItem.id,1)" :name="'p'+index+'c'+subIndex" :id="'p'+index+'c-read+'+subIndex" :checked="childrenItem.permission===1">
                <label :for="'p'+index+'c-read+'+subIndex">读</label>
              </li>
              <li class="dib">
                <input type="radio" @change="onChange(childrenItem.id,2)" :name="'p'+index+'c'+subIndex" :id="'p'+index+'c-write+'+subIndex" :checked="childrenItem.permission===2">
                <label :for="'p'+index+'c-write+'+subIndex">读写</label>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tc btn-box">
      <button @click="onBack" class="xxl-btn-css blue-button">保存</button>
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      roleName: '',
      menuList: []
    }
  },
  mounted() {
    this.roleName = this.$route.query.roleName
    this.$http.get('sys/role/menu/list', {
      params: {
        roleId: this.$route.params.id
      }
    }).then(data => {
      if (data.data.httpCode === 200) {
        data.data.rows.forEach((i) => {
          if (!i.sysMenu.parentId) {
            let parent = {}
            parent.children = []
            parent.name = i.sysMenu.name
            parent.id = i.sysMenu.id
            parent.permission = i.permission || 0
            this.menuList.push(parent)
          }
        })
        data.data.rows.forEach((j) => {
          if (j.sysMenu.parentId) {
            let children = {}
            children.name = j.sysMenu.name
            children.id = j.sysMenu.id
            children.permission = j.permission || 0
            this.menuList.forEach((i) => {
              if (j.sysMenu.parentId === i.id) {
                i.children.push(children)
              }
            })
          }
        })
      } else {
        this.$toasted.show(data.data.msg)
      }
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    onChange(id, type) {
      this.$http.post('/sys/role/menu/change', {
        roleId: this.$route.params.id,
        menuId: id,
        permission: type
      }).then(data => {
        if (data.data.httpCode === 200) {
          console.log('s')
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    onBack() {
      this.$router.push('/index/role-manage')
    }
  }
}

</script>
<style type="text/css" scoped>
.container {
  margin-top: 20px;
}

.min-height {
  min-height: 1870px;
}

.box-title a {
  color: #a5a5a5;
}

h3 {
  padding-left: 30px;
}

.main {
  border: 1px solid #ddd;
  width: 520px;
  margin: 40px auto 0;
}

h4 {
  font-size: 18px;
  line-height: 35px;
  padding: 0 10px;
  border-bottom: 1px solid #ddd;
}

h4 label {
  font-size: 16px;
}

.parent-box li {
  margin-left: 20px;
}

.children-box {
  padding-left: 80px;
  border-bottom: 1px solid #ddd;
  padding: 0 10px 0 50px;
}

.children-box li {
  line-height: 30px;
  margin-left: 25px;
}

.children-box .fix {
  line-height: 30px;
}

div.dib {
  margin-left: 15px;
}

ul li span {
  width: 194px;
  display: inline-block;
  text-align: right;
  color: #666666;
  margin-right: 20px;
}

.btn-box {
  margin-top: 30px;
}

</style>
